<template>
    <div class="personal">
        <el-card class="box-card">
            <!-- 标题 -->
            <div class="content">
                <img src="../../assets/head.jpg" alt="" style="text-align: center;border-radius: 200px" width="200px" height="200px">
                <p>用户ID：{{userInfo.id}}</p>
                <p>账号：{{userInfo.username}}</p>
                <p>密码：{{userInfo.password}}</p>
                <p>个性签名：吃我所想，做我所做。</p>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                userInfo: []
            };
        },
        methods: {
            getUserInfo(){
                this.userInfo = this.$store.state.userInfo;
                console.log(this.userInfo)
            }
        },
        created() {
            this.getUserInfo();
        },
    };
</script>

<style lang="less">
    .personal {
        .el-card {
            .content{
                font-size: 18px;
                line-height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
        }
    }
</style>

